<template>
  <view class="other-view">
    <!-- 其他用户信息界面 -->
    <view class="info-view" :style="backgroundStyle">
      <view class="info-view-bg">
        <view class="status_bar">
          <!-- 这里是状态栏 -->
        </view>
        <!-- 修改成返回和操作 -->
        <view class="menu-box">
          <image @click="turnBack" class="menu-img" src="../../static/img/left.png"></image>
        </view>
        
          <view class="info-box">
              <image class="avatar" :src="data.user.avatar"></image>
              <view class="na-box">
                <text class="name">{{data.user.userName}}</text>
                <text class="account">账号：{{data.user.account}}</text>
              </view>
            </view>
            
            <view class="des-box">
              <text class="des-text">{{data.user.infoDes}}</text>
            </view>
              <!-- 关注数、点赞数 -->
              <!-- 设置和编辑信息 -->
              <view class="info-bottom-box">
                <view class="afl-box">
                  <view class="afl-item">
                    <text class="aflt-num">{{data.user.attNum}}</text>
                    <text class="afl-text">关注</text>
                  </view>
                  <view class="afl-item">
                    <text class="aflt-num">{{data.user.funNum}}</text>
                    <text class="afl-text">粉丝</text>
                  </view>
                  <view class="afl-item">
                    <text class="aflt-num">{{data.user.likeStarNum}}</text>
                    <text class="afl-text">点赞与收藏</text>
                  </view>
                </view>
                <!-- 修改成关注和私信 -->
                <view class="info-icon-box">
                  <button @click="disAttUser" class="m-button" v-if="data.user.att > 0">已关注</button>
                  <button @click="attUser" class="m-button" v-else>关注</button>
                  <button @click="sendMsg" class="m-button">私信</button>  
                </view>
              </view>
      </view>
      
            
        </view>
        <!-- 其他用户的笔记和资讯 -->
        <!-- 导航栏 -->
        <view class="nsl-box">
          <view class="nsl-item" @tap="swiperChange(0)" :class="data.nslIndex == 0 ? 'nav-actived' : ''">
            <text class="nsl-text">笔记</text>
          </view>
          <view class="nsl-item" @tap="swiperChange(1)" :class="data.nslIndex == 1 ? 'nav-actived' : ''">
            <text class="nsl-text">资讯</text>
          </view>
        </view>
        <!-- 显示内容 -->
          <swiper class="nsl-swiper" :current="data.nslIndex" @change="swiperChange($event.detail.current)">
            <swiper-item class="nsl-swiper-item">
              <scroll-view class="note-list" scroll-y="true" lower-threshold="50" @scrolltolower="getMoreNote">
                <view class="waterfall">
                  <!-- 笔记 -->
                  <view class="flowList">
                    <view class="note" v-for="idx in data.noteLeft" @click="showNote(data.noteList[idx].id,idx)">
                      <!-- 笔记封面 -->
                      <view class="note-img-box">
                        <image mode="widthFix" class="note-img" :src="data.noteList[idx].url"></image>
                      </view>
                      <!-- 笔记标题内容 -->
                      <view class="note-content-box">
                        <rich-text class="note-text">{{data.noteList[idx].title}}</rich-text>
                      </view>
                      <!-- 笔记作者信息和点赞情况 -->
                      <view class="note-info">
                        <view class="note-author-info">
                          <image class="author-avatar" :src="data.noteList[idx].authorAvatar"></image>
                          <text class="author-name">{{data.noteList[idx].authorName}}</text>
                        </view>
                        <view class="like-box" @click.stop="likeOtherNote(idx)">
                         <image class="like-icon" v-if="data.noteList[idx].like > 0" src="../../static/img/like-btn2.png"></image>
                         <image class="like-icon" v-else src="../../static/img/like-btn1.png"></image>
                         <text class="like-num">{{data.noteList[idx].likeNum}}</text>
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="flowList">
                   <view class="note" v-for="idx in data.noteRight" @click="showNote(data.noteList[idx].id,idx)">
                     <!-- 笔记封面 -->
                     <view class="note-img-box">
                       <image mode="widthFix" class="note-img" :src="data.noteList[idx].url"></image>
                     </view>
                     <!-- 笔记标题内容 -->
                     <view class="note-content-box">
                       <rich-text class="note-text">{{data.noteList[idx].title}}</rich-text>
                     </view>
                     <!-- 笔记作者信息和点赞情况 -->
                     <view class="note-info">
                       <view class="note-author-info">
                         <image class="author-avatar" :src="data.noteList[idx].authorAvatar"></image>
                         <text class="author-name">{{data.noteList[idx].authorName}}</text>
                       </view>
                       <view class="like-box" @click.stop="likeOtherNote(idx)">
                         <image class="like-icon" v-if="data.noteList[idx].like > 0" src="../../static/img/like-btn2.png"></image>
                         <image class="like-icon" v-else src="../../static/img/like-btn1.png"></image>
                         <text class="like-num">{{data.noteList[idx].likeNum}}</text>
                       </view>
                     </view>
                   </view>         
                </view>   
                </view>
                <view class="tip-tag" v-if="data.noteList.length >= data.totalNote">
                  暂无更多了
                </view>
              </scroll-view>
            </swiper-item>
            <swiper-item class="nsl-swiper-item">
              <scroll-view scroll-y="true" class="trip-new" lower-threshold="50" @scrolltolower="getMoreTripNew">
                <view class="trip-item" @click="showTripNew(item.id,index)" v-for="(item,index) in data.tripNewList" :key="index">
                  <image mode="aspectFill" class="trip-img" :src="item.cover"></image>
                  <view class="trip-des">
                    <text class="trip-title">{{item.title}}</text>
                    <text class="trip-road">{{item.departure}}->{{item.destination}}</text>
                    <text class="trip-road">{{item.startTime}}->{{item.dayNum}}天</text>
                    <view class="trip-info">
                      <view class="author-info">
                        <image class="trip-avatar" :src="item.authorAvatar"></image>
                        <text class="trip-name">{{item.authorName}}</text>
                      </view>
                      <view class="trip-like-box" @click.stop="likeOtherTripNew(index)">
                        <image class="trip-like" v-if="item.like == 0 || item.like == null" src="../../static/img/like-btn1.png"></image>
                        <image class="trip-like" v-else src="../../static/img/like-btn2.png"></image>
                        <text class="trip-like-num">{{item.likeNum}}</text>
                      </view>
                      
                    </view>
                  </view>
                </view>
                <view class="tip-tag" v-if="data.tripNewList.length >= data.totalTripNew">
                  暂无更多了
                </view>
              </scroll-view>
            </swiper-item>
          </swiper>
  </view>
</template>

<script setup>
import { reactive, ref,toRefs,computed } from 'vue';
import { onShow,onLoad,onUnload } from '@dcloudio/uni-app'
import helper from '../../common/helper.js'

const data = reactive({
  userId:0,
  user:{},
  nslIndex: 0,
  noteList:[],
  noteLeft:[],
  noteRight:[],
  noteLeftHeight:0,
  noteRightHeight:0,
  totalNote:0,
  notePageNum:0,
  notePageSize:10,
  tripNewList:[],
  totalTripNew:0,
  tripNewPageNum:0,
  tripNewPageSize:10,
});

onLoad((options)=>{
  console.log(options)
  data.userId = options.userId
  getUserInfo(data.userId)
  getTripNew()
  getNote()
})

onShow(()=>{
  //监听页面返回的点赞事件
  updateLikeData()
})

onUnload((options)=>{
  uni.$off('like');  
})

function updateLikeData(){
  uni.$on('like',(likeData)=>{
    if(likeData.event != 3){
      return
    }
    //我的笔记或资讯
    if(data.nslIndex == 0){
      console.log("点赞事件:笔记"+likeData.index+" "+likeData.like)
      if(data.noteList[likeData.index].like < likeData.like){
        data.noteList[likeData.index].likeNum++
      }else if(data.noteList[likeData.index].like > likeData.like){
        data.noteList[likeData.index].likeNum--
      }
      data.noteList[likeData.index].like = likeData.like 
    }else{
      console.log("点赞事件:资讯"+likeData.index+" "+likeData.like)
      if(data.tripNewList[likeData.index].like < likeData.like){
        data.tripNewList[likeData.index].likeNum++
      }else if(data.tripNewList[likeData.index].like > likeData.like){
        data.tripNewList[likeData.index].likeNum--
      }
      data.tripNewList[likeData.index].like = likeData.like
    }
  })
}

let backgroundStyle = computed(() => {
  if(data.user != null && data.user.infoBg != null){
    return{
      backgroundImage: `url(${data.user.infoBg})`,
      backgroundSize: 'cover', 
      backgroundPosition: 'center', 
      backgroundRepeat: 'no-repeat', 
    };
  }
});

function swiperChange(index){
    data.nslIndex = index
}

function getUserInfo(userId){
  uni.request({
    url: helper.webUrl + "/user/getUserInfo",
    method:'GET',
    header:{
      'Content-Type': 'application/x-www-form-urlencoded',
      'token': helper.getToken()
    },
    data: {
      userId: userId
    },
    success: (res) => {
      console.log(res.data);
      if(res.data.code == 200){
        data.user = res.data.data
        console.log(data.user)
      }
    },
    fail: (err) => {
      console.error('请求失败:', err);
    }
  })
}

function showNote(noteId,index){
  console.log("查看笔记"+noteId)
  uni.navigateTo({
    url:`/subpages/noteDetail/noteDetail?noteId=${noteId}&index=${index}&event=3`
  })
}

function showTripNew(tripNewId,index){
  console.log("查看资讯"+tripNewId)
  uni.navigateTo({
    url:`/subpages/tripNew/tripNew?tripNewId=${tripNewId}&index=${index}&event=3`
  })
}



async function likeOtherNote(idx){
  let noteId = data.noteList[idx].id
  if(data.noteList[idx].like > 0){
    let res = await helper.dislikeNoteReq(noteId)
    if(res.data.code == 200){
      data.noteList[idx].like = 0
      data.noteList[idx].likeNum--
    }
  }else{
    let res = await helper.likeNoteReq(noteId)
    if(res.data.code == 200){
      data.noteList[idx].like = 1
      data.noteList[idx].likeNum++
    }
  }
}

async function likeOtherTripNew(index){
  let tripNewId = data.tripNewList[index].id
  if(data.tripNewList[index].like > 0){
    let res = await helper.dislikeTripNewReq(tripNewId)
    if(res.data.code == 200){
      data.tripNewList[index].like = 0
      data.tripNewList[index].likeNum--
    }
  }else{
    let res = await helper.likeTripNewReq(tripNewId)
    if(res.data.code == 200){
      data.tripNewList[index].like = 1
      data.tripNewList[index].likeNum++
    }
  }
}

function getNote(){
  uni.request({
      url: helper.webUrl+'/note/getNoteByUserId', 
      method:'GET',
      header:{
        'token': helper.getToken()
      },
      data: {
        userId: data.userId,
        pageNum:data.notePageNum,
        pageSize:data.notePageSize,
      },
      success: (res) => {
        console.log(res.data);
        //处理笔记数据
        if(res.data.code == 200){
          let list = res.data.data.record
          data.totalNote = res.data.data.total
          data.notePageNum++
          for(let i = 0; i < list.length; i++){
            data.noteList.push(list[i])
            if(data.noteLeftHeight <= data.noteRightHeight){
              let num = list[i].height / list[i].width > helper.maxNoteImg ? helper.maxNoteImg : list[i].height / list[i].width
              data.noteLeftHeight += num + helper.noteBox
              data.noteLeft.push(data.noteList.length-1)
            }else{
              let num = list[i].height / list[i].width > helper.maxNoteImg ? helper.maxNoteImg : list[i].height / list[i].width
              data.noteRightHeight += num + helper.noteBox
              data.noteRight.push(data.noteList.length-1)
            }
          }
        }
      },
      fail: (err) => {
        console.error('请求失败:', err);
      }
  });
}

function getMoreNote(){
  console.log("加载更多笔记。。。")
  //判断是否加载完
  if(data.totalNote <= data.noteList.length){
    return
  }
  getNote()
}

function getTripNew(){
  uni.request({
      url: helper.webUrl+'/tripNew/getTripNewByUserId', 
      method:'GET',
      header:{
        'token': helper.getToken()
      },
      data: {
        userId: data.userId,
        pageNum:data.tripNewPageNum,
        pageSize:data.tripNewPageSize,
      },
      success: (res) => {
        console.log(res.data);
        //处理笔记数据
        if(res.data.code == 200){
          let list = res.data.data.record
          data.totalTripNew = res.data.data.total
          data.tripNewPageNum++
          for(let i = 0; i < list.length; i++){
            list[i].startTime = helper.getDate(list[i].startTime)
            data.tripNewList.push(list[i])
          }
        }
      },
      fail: (err) => {
        console.error('请求失败:', err);
      }
  });
}

function getMoreTripNew(){
  console.log("加载更多点赞的笔记。。。")
  if(data.totalTripNew <= data.tripNewList.length){
    return
  }
  getTripNew()
}

function turnBack(){
  uni.navigateBack().catch(()=>{
    uni.switchTab({
      url:"/pages/me/me"
    })
  })
}

async function attUser(){
  console.log("关注用户")
  let res = await helper.attUserReq(data.userId)
  if(res.data.code == 200){
    data.user.att = 1
    data.user.funNum++
  }
}

async function disAttUser(){
  let res = await helper.disAttUserReq(data.userId)
  if(res.data.code == 200){
    data.user.att = 0
    data.user.funNum--
  }
}

function sendMsg(){
  console.log("发送信息")
  uni.navigateTo({
    url:`/subpages/chat/chat?chatUserId=${data.userId}&&chatUserAvatar=${data.user.avatar}&&chatUserName=${data.user.userName}`
  })
} 
</script>

<style>
.other-view{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.menu-box{
  height: 5vh;
  padding-top: 20px;
  padding-left: 5px;
}
.menu-img{
  width: 30px;
  height: 30px;
}
.m-button{
  height: 60%;
  background-color: #89C0FF;
  font-size: 14px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}
</style>
